<template>
  <div class="nft-intro-and-box">
    <div class="nft-intro">
      <div class="nft-intro-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, labore,
        dicta aperiam quae porro suscipit praesentium assumenda neque eius unde
        hic saepe nihil! Veritatis, repellendus. Alias saepe culpa aliquid
        earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo
        repellendus, magni voluptatibus soluta, maxime
      </div>
    </div>
    <div class="nft-box-and-page-turner">
      <div class="nft-box">
        <div v-if="arr.length == 0" class="no-nfts">
          <div>You haven't got any MD Nft yet.</div>
        </div>
        <div v-else>
          <ul class="nft-list">
            <li
              v-for="(item, index) in arr.slice(nftsInPageStart, nftsInPageEnd)"
              :key="index"
            >
              <div class="nftbox1" @click="handleNftsPolicyInit(item)">
                {{ item.policyId }} -- {{ item.coverage / 10 ** 18 }}
              </div>
            </li>
            <li v-show="insertBlock">
              <div class="nftbox1 nftbox-hide"></div>
            </li>
          </ul>
        </div>
        <HandleNftsModal
          ref="handleNftsPolicy"
          :visible="visible"
          :content="content"
          :nftIndex="nftIndex"
          :coverage="coverageOfPolicy"
          :isClaimed="isClaimed"
          :poolAddress="poolAddressOfPolicy"
          :poolName="poolNameofPolicy"
          :duration="duration"
          :claimDisabled="claimDisabled"
          @closeModal="visible = false"
        >
        </HandleNftsModal>
      </div>
      <div class="page-turner page-turner-gov">
        <Pagination
          v-model:current="current"
          :total="arr.length"
          :pageSize="pageSize"
          @change="onPaginationChange"
          :showSizeChanger="false"
        >
          <template #itemRender="{ type, originalElement }">
            <div class="pagination-container" v-if="type === 'prev'">
              <div class="pagination-text">
                {{ pageSize * (current - 1) + 1 }} - {{ pageSize * current }} of
                {{ arr.length }} items
              </div>
              <img @click="pageDown()" src="@/assets/left-icon.svg" alt="" />
            </div>
            <div class="pagination-container" v-else-if="type === 'next'">
              <img @click="pageUp()" src="@/assets/right-icon.svg" alt="" />
            </div>
            <component :is="originalElement" v-else></component>
          </template>
        </Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { Pagination } from "ant-design-vue";
import store from "../../vuex/store";
import HandleNftsModal from "../HandleNfts/HandleNftsModal.vue";

export default {
  name: "PolicyNfts",
  components: {
    HandleNftsModal,
    Pagination,
  },
  data() {
    return {
      visible: false,
      content: "i am nft",
      nftIndex: 0,
      nftsInPageStart: 0,
      nftsInPageEnd: 9,
      current: 1,
      pageSize: 9,
      coverageOfPolicy: 0,
      isClaimed: "",
      poolAddressOfPolicy: "",
      poolNameofPolicy: "",
      duration: "",
      claimDisabled: true,
    };
  },
  methods: {
    onPaginationChange(current, size) {
      this.current = current;
      this.pageSize = size;
      this.nftsInPageStart = (current - 1) * size;
      this.nftsInPageEnd = current * size;
    },
    pageUp() {
      if (this.nftsInPageStart + 9 >= this.arr.length) {
        return;
      } else {
        this.nftsInPageStart += 9;
        this.nftsInPageEnd += 9;
      }
    },
    pageDown() {
      if (this.nftsInPageEnd - 9 <= 0) {
        return;
      } else {
        this.nftsInPageStart -= 9;
        this.nftsInPageEnd -= 9;
      }
    },
    getCoverage(index) {
      return store.state.web3Data.policyArr[index].coverage / 10 ** 18;
    },
    getClaimStatus(status) {
      if (status == false) {
        status = "Unclaimed";
      } else {
        status = "Claimed";
      }
      return status;
    },
    async handleNftsPolicyInit(item) {
      this.visible = true;
      this.nftIndex = item.policyId;
      this.coverageOfPolicy = item.coverage;
      this.isClaimed = this.getClaimStatus(item.isClaimed);
      this.poolAddressOfPolicy = item.protocol;
      this.poolNameofPolicy = item.poolName;
      this.duration = item.duration;
      this.$refs.handleNftsPolicy.backToDetails();
      this.claimDisabled =
        item.isClaimed || item.isClaimApplying || item.isSettled;
      store.dispatch("getTimestampFromEpoch", {
        index: item.enteredEpochIndex,
      });
    },
    getPoolName(poolAddress) {
      return store.state.web3Data.poolAddressArr[poolAddress]?.Protected;
    },
    getPoolImgae(poolAddress) {
      return store.state.storage.protocolImage[poolAddress];
    },
  },
  computed: {
    insertBlock() {
      if (this.nftsInPageStart + 9 <= this.arr.length) {
        return false;
      } else {
        let lastPageBlocks = this.nftsInPageEnd - this.arr.length;
        if (lastPageBlocks % 3 == 1) {
          return true;
        } else {
          return false;
        }
      }
    },

    arr() {
      let policies = store.state.web3Data.policyArr;
      let arrLength = policies.length;
      for (var i = 0; i < arrLength; i++) {
        let poolAddress = policies[i].protocol;
        policies[i]["poolName"] =
          store.state.web3Data.poolAddressArr[poolAddress]?.Protected;
        policies[i]["poolImage"] =
          store.state.storage.protocolImage[poolAddress];
      }
      let sortArr = policies
        .sort()
        .sort((a, b) => {
          return a.id - b.id;
        })
        .sort((a, b) => {
          if (
            (a.isClaimed == true ||
              a.isClaimApplying == true ||
              a.isSettled == true) &&
            b.isClaimed == false &&
            b.isClaimApplying == false &&
            b.isSettled == false
          ) {
            return 1;
          } else {
            return -1;
          }
        });
      return sortArr;
    },
  },
  mounted() {
    store.dispatch("getPolicyNfts");
  },
};
</script>

<style lang='less'>
.nft-intro-and-box {
  border: none;
}

.nft-intro {
  width: 88%;
  margin: 0 auto;
  margin-bottom: 30px;
  padding: 2%;
  color: #a0a9bd;
  font-size: 18px;
  line-height: 30px;
}

.nft-box-and-page-turner {
  border: none;
}

.nft-box {
  width: 88%;
  border: 3px solid #1649ff;
  border-radius: 20px;
  margin: 0 auto;
  padding: 2%;
}

.nft-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nftbox1 {
  cursor: pointer;
  height: 150px;
  width: 100px;
  border: 1px solid #1649ff;
  border-radius: 10px;
  margin-bottom: 10px;
  color: #a0a9bd;
  /* background-image: url(../../assets/webclip.png);
    background-size: 50%; */
  font-size: 30px;
  box-sizing: border-box;
  padding: 15px;
  background-image: url(../../assets/defender.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 50% 90%;
  line-height: 1;
}

.nftbox1:hover {
  box-shadow: #1649ff 5px 5px 5px;
}

.nftbox-hide {
  border: none;
  cursor: auto;
  background-image: none;
}

.nftbox-hide:hover {
  box-shadow: none;
}

.no-nfts {
  color: #a0a9bd;
  font-size: 25px;
  font-weight: 800;
  height: 130px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

@media (max-width: 345px) {
  .nftbox1 {
    height: 90px;
    width: 75px;
  }
}

@media (min-width: 345px) and (max-width: 380px) {
  .nftbox1 {
    height: 120px;
    width: 90px;
  }
}

@media (min-width: 483px) and (max-width: 560px) {
  .nftbox1 {
    height: 180px;
    width: 120px;
  }
}

@media (min-width: 560px) and (max-width: 660px) {
  .nftbox1 {
    height: 100px;
    width: 150px;
  }
}

@media (min-width: 660px) and (max-width: 820px) {
  .nftbox1 {
    height: 120px;
    width: 180px;
  }
}

@media (min-width: 820px) and (max-width: 840px) {
  .nft-intro-and-box {
    display: flex;
    width: 88%;
    margin: 0 auto;
    justify-content: space-between;
  }

  .nft-intro {
    width: 250px;
    margin: 0;
  }

  .nft-box-and-page-turner {
    width: 750px;
  }

  .nftbox1 {
    height: 180px;
    width: 120px;
  }
}

@media (min-width: 840px) and (max-width: 916px) {
  .nft-intro-and-box {
    display: flex;
    width: 88%;
    margin: 0 auto;
    justify-content: space-between;
  }

  .nft-intro {
    width: 250px;
    margin: 0;
  }

  .nft-box-and-page-turner {
    width: 750px;
  }

  .nftbox1 {
    height: 100px;
    width: 150px;
  }
}

@media (min-width: 916px) and (max-width: 935px) {
  .nft-intro-and-box {
    display: flex;
    width: 88%;
    margin: 0 auto;
    justify-content: space-between;
  }

  .nft-intro {
    width: 250px;
    margin: 0;
  }

  .nft-box-and-page-turner {
    width: 750px;
  }

  .nftbox1 {
    height: 150px;
    width: 100px;
  }
}

@media (min-width: 935px) and (max-width: 1115px) {
  .nft-intro-and-box {
    display: flex;
    width: 88%;
    margin: 0 auto;
    justify-content: space-between;
  }

  .nft-intro {
    width: 250px;
    margin: 0;
  }

  .nft-box-and-page-turner {
    width: 750px;
  }

  .nftbox1 {
    height: 180px;
    width: 120px;
  }
}

@media (min-width: 1115px) and (max-width: 1286px) {
  .nft-intro-and-box {
    display: flex;
    width: 88%;
    margin: 0 auto;
    justify-content: space-between;
  }

  .nft-intro {
    width: 250px;
    margin: 0;
  }

  .nft-box-and-page-turner {
    width: 750px;
  }

  .nftbox1 {
    height: 100px;
    width: 150px;
  }
}

@media (min-width: 1286px) {
  .nft-intro-and-box {
    display: flex;
    width: 88%;
    margin: 0 auto;
    justify-content: space-between;
  }

  .nft-intro {
    margin: 0;
    flex: 1;
  }

  .nft-box-and-page-turner {
    width: 750px;
  }

  .nftbox1 {
    height: 120px;
    width: 180px;
  }
}
</style>